<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 4. 使用子组件 -->
      <Child></Child>
      <hello-world></hello-world>
    </div>
    <div id="box">
      <h1>{{title}}</h1>
      <hello></hello>
      <Child></Child>
    </div>
	</body>
  <script src="../vue.js"></script>
  
  <!-- 1. 定义组件模板 -->
  <template id="temp1">
    <div>
      <em>这是 - {{title}}</em>
    </div>
  </template>
  
  <script>
    
    // 局部组件:谁注册,谁使用
    
    // 2. 定义组件实例
    const child1 = {
      name:"child",
      template:"#temp1",
      data(){
        return {
          title:"子组件"
        }
      }
    }
    
    new Vue({
      el:"#app",
      data:{
        title:"这是顶层组件-app"
      },
      // 3. 注册子组件
      components:{
        Child:child1,
        helloWorld:child1
      }
    })
    
    
    new Vue({
      el:"#box",
      data:{
        title:"这是box"
      }
    })
    
    // 如果不涉及到组合单词(没有出现中划线)，自定义组件时,组件名的首字母尽量大写
    // 当在页面结构中的组件名出现中划线时,在js中注册组件时,要修改成小驼峰的形式
    
    
  </script>
</html>
